<template>
        <div class="FormBoDefManager">
            <a-tabs default-active-key="1">
                <a-tab-pane key="1" :tab="i18n('list.BoDetails','BO详情')">
                    <div class="FormBoDetails">
                        <div>
                            <ul>
                                <li @click="boTabCallback(index)" :class="[boTab==index? 'boTabHover':'']"
                                    v-for="(obj,index) in boList" :key="index">{{obj.name}}</li>
                            </ul>
                        </div>
                        <div>
                            <div v-for="(ent,index) in boList" style="height: 100%;" :key="index" v-if="boTab==index">
                                <div>{{i18n('list.tableName','物理表名')}}：{{ent.tableName}}</div>
                                <rx-grid ref="table" :dataSource="ent.boAttrList" :allowRowSelect="false"
                                         :multiSelect="true" :showPage="false" :columns="columns" borders="true"
                                         class="FormBoDetailsRxGrid">
									<span slot="dataType" slot-scope="{text,record,index,blur}">
										<span v-html="renderDataType(record)"></span>
									</span>
                                    <span slot="control" slot-scope="{text,record,index,blur}">
										<span v-html="renderControlType(record)"></span>
									</span>
                                    <span slot="action" slot-scope="{text,record,index,blur}">
										<a @click="delRow(record.id)">
                                            {{$ti18('rxList.delBtn','删除')}}
                                        </a>
									</span>
                                </rx-grid>
                            </div>
                        </div>
                    </div>
                </a-tab-pane>
                <a-tab-pane key="2" :tab="i18n('list.jsonView','JSON视图')" force-render>
                    <json-viewer :value="jsonView" :expand-depth="5" copyable boxed sort></json-viewer>
                </a-tab-pane>
                <a-tab-pane key="3" :tab="i18n('list.assoCompu','关联电脑表单')">
                   <form-bo-def-form ref="formBoDefForm" :pkId="pkId" :layerid="layerid" :destroy="destroy" tabId="1"></form-bo-def-form>
                </a-tab-pane>
            </a-tabs>
        </div>
</template>
<script>
import FormBoDefApi from '@/api/form/bo/formBoDef'
import formBoControls from "@/api/form/bo/formBoControls";
import {
    RxGrid,
    Util
} from "@lowcode/jpaas-common-lib";
import FormBoDefForm from "./FormBoDefForm"
export default {
    name: 'FormBoDefManager',
    props: ["pkId", "layerid", "destroy"],
    mixins: [formBoControls],
    components: {
        RxGrid,
        FormBoDefForm
    },
    data() {
        return {
            labelCol: {
                span: 6
            },
            wrapperCol: {
                span: 18
            },
            columns: [{
                title: this.boentI18n('form.attrName','属性名'),
                dataIndex: 'name',
                width: 120
            },
                {
                    title: this.boentI18n('form.remarks','备注'),
                    dataIndex: 'comment',
                    width: 120
                },
                {
                    title: this.boentI18n('form.dataType','数据类型'),
                    dataIndex: 'dataType',
                    width: 120,
                    scopedSlots: {
                        customRender: 'dataType'
                    }
                },
                {
                    title: this.boentI18n('form.controlType','控件类型'),
                    dataIndex: 'control',
                    width: 120,
                    scopedSlots: {
                        customRender: 'control'
                    }
                },
                {
                    title: this.$ti18('rxList.action','操作'),
                    width: 120,
                    dataIndex: 'action',
                    scopedSlots: {
                        customRender: 'action'
                    }
                }
            ],
            boList: [],
            hasGen: false,
            boTab: 0,
            jsonView: {},
            fields: [],
            mFields: [],
            columnsForm: [{
                title: this.boentI18n('form.name','名称'),
                dataIndex: 'name',
                width: 120
            },
                {
                    title: this.boentI18n('form.alias','别名'),
                    dataIndex: 'alias',
                    width: 120
                },
                {
                    title: this.i18n('form.priority','优先级'),
                    dataIndex: 'level',
                    allowCellEdit: true,
                    width: 120,
                    scopedSlots: {
                        customRender: 'level'
                    }
                },
                {
                    title: this.i18n('form.permission','权限'),
                    dataIndex: 'permission',
                    displayField: 'permission_name',
                    allowCellEdit: true,
                    width: 120,
                    scopedSlots: {
                        customRender: 'permission'
                    }
                }
            ]
        }
    },
    created() {
        this.getBoJson();
        this.getJson();
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"formBoDef",key);
        },
        boentI18n(name,text,key){
            return this.$ti18(name,text,"formBoEntity",key);
        },
        boTabCallback(index) {
            this.boTab = index;
        },
        getBoJson() {
            this.boList = [];
            FormBoDefApi.getBoJson(this.pkId).then(res => {
                var data = res.data;
                var boEnt = data.boEnt;
                this.boList.push(boEnt);
                this.boList.push(...boEnt.boEntityList);
                this.hasGen = data.hasGen;
            });
        },
        getJson() {
            FormBoDefApi.getJsonData(this.pkId).then(res => {
                var data = res.data;
                this.jsonView = data;
            })
        },
        delRow(attrId) {
            var self = this;
            this.$confirm({
                title: this.$ti18('rxMsa.actionTips','操作提示'),
                zIndex: 20000,
                okText: this.$ti18('rxForm.ackBtn','确认'),
                cancelText: this.$ti18('rxForm.cancelBtn','取消'),
                content: this.i18n('msg.delMsg','该操作会删除BO定义的字段,确定清除BO属性吗?'),
                onOk() {
                    FormBoDefApi.removeAttr(attrId).then(res => {
                        self.getBoJson();
                    })
                }
            })
        },
    }
}
</script>
<style scoped>
.FormBoDefManager {
    width: 100%;
    height: 100%;
    padding: 0px 20px 20px 20px;
}

.FormBoDetails {
    display: flex;
    height: 100%;
}

.FormBoDetails>div:nth-child(1) {
    width: 196px;
    background-color: #f5f7fa;
    border: solid 1px #e6e8eb;
    padding: 15px 0px;
}

.FormBoDetails>div:nth-child(1) ul li {
    height: 32px;
    line-height: 32px;
    padding: 0px 20px;
    color: #46494d;
    margin-top: 1px;
}

.FormBoDetails>div:nth-child(1) ul li:hover {
    background-color: #1890ff;
    color: white;
    cursor: pointer;
}

.boTabHover {
    background-color: #1890ff;
    color: white !important;
}

.FormBoDetails>div:nth-child(2) {
    flex: 1;
    margin-left: 12px;
}

.FormBoDetailsRxGrid {
    height: calc(100% - 32px);
    margin-top: 10px;
}
</style>
